<template>
	<view class="wrap">
		<view class="list" v-for="(it, ind) in list" :key="ind" @click="goNext(it.order_id)">
			<view class="flex pad-t-b-10 border-bottom-1 ">
				<view class="width-65">
					<i-icon icon="icondianpu" class="mr-10" type="single" size="42rpx" color="#FFE23E"></i-icon>
				 <text class="font-32 font-bold">{{ it.store_name }}</text>	
				</view>
				<view class="width-35 u-text-right mr-10 color-EB5C02"><text v-if="returnStatus(it.status)==='待确认'" class="color-999 mr-15">门店创建</text> {{ returnStatus(it.status) }}</view>
			</view>
			<view class="flex pad-t-b-20 border-bottom-1">
				<view class="width-25 projectList" v-for="(item, index) in it.goodlist" :key="index" v-if="index<4">
					<view class="projectImg"><image :src="item.goods_img ? item.goods_img : ''" mode=""></image></view>
					<view class="proText">{{ item.goods_name }}</view>
				</view>
			</view>
			<view class="pad10" v-if="it.status === 50">
				<view class="pad-t-b-10">
					服务类别：
					<text v-for="(item, ind) in it.service_type">{{ item }}</text>
				</view>
				<view class="flex" v-if="!is_car_wash">
					<view class="width-70 line30 flex ">
						三检：
						<view :class="[it.is_precheck?'bg70CD58':'','dot'] "></view>
						预检
						<view :class="[it.is_inspection?'bg70CD58':'','dot'] "></view>
						上检
						<view :class="[it.is_precheck?'bg70CD58':'','dot'] "></view>
						质检/交车
					</view>
					<view class="width-30"><view class="btn-bg-yellow">上检签字确认</view></view>
				</view>
			</view>
			<view class="flex pad10 " v-else-if="it.status === 10 || it.status === 20">
				<view class="font-26 color-999">共{{ it.goods_count }}件商品，{{ it.service_count }}项服务</view>
				<view class="font-26 color-999 ml-20">
					实付
					<text class="color-333 font-bold">￥{{ it.actual_payment }}</text>
				</view>
			</view>
			<!-- 待服务 -->
			<view class="flex pad10 " v-else-if="it.status === 30">
				<view class="width-40">
					<view class="font-26 color-999">共{{ it.goods_count }}件商品，{{ it.service_count }}项服务</view>
					<view class="font-26 color-999">
						实付
						<text class="color-333 font-bold">￥{{ it.actual_payment }}</text>
					</view>
				</view>
				<view class="width-60 u-text-right flex">
					<view class="btn-bg-yellow wid184 bgfffBtn mt-15">到店排队</view>
					<view class="btn-bg-yellow wid184 mt-15">{{it.appointment_time?'取消预约到店':'预约到店'}}</view>
				</view>
			</view>
			<view class="flex pad10 " v-else>
				<view class="width-50">
					<view class="font-26 color-999">共{{ it.goods_count }}件商品，{{ it.service_count }}项服务</view>
					<view class="font-26 color-999">
						实付
						<text class="color-333 font-bold">￥{{ it.actual_payment }}</text>
					</view>
				</view>
				<view class="width-50 u-text-right" v-if="it.status === 5"><view class="btn-bg-yellow mt-15">立即支付</view></view>
				<view class="width-50 u-text-right" v-else-if="it.status === 0"><view class="btn-bg-yellow mt-15">立即确认</view></view>
					<view class="width-50 u-text-right" v-else-if="it.status === 60"><view class="btn-bg-yellow mt-15">查看报告</view></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: [
				{ val: 0, name: '待确认' },
				{ val: 5, name: '待付款' },
				{ val: 10, name: '已取消' },
				{ val: 20, name: '待备货' },
				{ val: 30, name: '待服务' },
				{ val: 40, name: '待施工' },
				{ val: 50, name: '服务中' },
				{ val: 60, name: '已完成' }
			]
		};
	},
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		returnStatus(val) {
			// if (val) {
				let statusTxt = '';
				this.status.forEach(it => {
					if (it.val === val) {
						statusTxt = it.name;
					}
				});
				return statusTxt;
			// }
		},
		sectionChange(e) {
			console.log(e);
		},
		goNext(it) {
			uni.navigateTo({
				url: '/pages_order/maintenanceOrderDetail/maintenanceOrderDetail?id='+it
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	background: #f6f6f6;
}
.list {
	width: 95%;
	margin: 2.5% auto;
	padding: 8rpx 10rpx;
	background: #fff;
	border-radius: 10rpx;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	.projectList {
		text-align: center;
		.projectImg {
			width: 140rpx;
			height: 140rpx;
			margin: auto;
			image {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
		}
		.proText {
			text-align: center;
			width: 140rpx;
			font-size: 24rpx;
			padding: 14rpx 0rpx;
			overflow: hidden; /*超出部分隐藏*/
			white-space: nowrap; /*禁止换行*/
			text-overflow: ellipsis; /*省略号*/
		}
	}
	.dot {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background: #999;
		margin: 24rpx 6rpx 24rpx 16rpx;
	}
}
.line30 {
	line-height: 60rpx;
}
.bg70CD58 {
	background: #70cd58 !important;
}
.wid184 {
	width: 184rpx !important;
}
.bgfffBtn {
	background: #fff !important;
	border: 2rpx solid #d4d4d4;
}
.pad10{
	padding: 10rpx;
}
.color-EB5C02{
	color: #EB5C02 !important;
}
</style>
